{% extends 'base/base.html' %}

{% block title %}
    首页
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
{% endblock %}

{% block main %}
    <main id="main">
        <div class="w1200 clearfix">
            <!-- main-contain start  -->
            {#  右边#}
            {% block main_contain %}
                <div class="main-contain">
                    <!-- banner start -->
                    <div class="banner">
                        <ul class="pic">
                            <!--淡入淡出banner-->
{#                            {% for i in data %}#}
{#                                <li><a href="{% url 'news:news_detail' i.news_id %}" target="_blank"><img src={{ i.image_url }} alt="test"></a></li>#}
{#                            {% endfor %}#}
                        </ul>
                        <a href="javascript:void(0);" class="btn prev" >
                            <i class="PyWhich py-arrow-left"></i></a>
                        <a href="javascript:void(0);" class="btn next">
                            <i class="PyWhich py-arrow-right"></i></a>
                        <ul class="tab">
                            <!-- 按钮数量必须和图片一致 -->


                            <li></li>


                            <li></li>


                            <li></li>


                            <li></li>


                            <li></li>


                            <li></li>


                        </ul>
                    </div>
                    <!-- banner end -->

                    <!-- content start -->
                    <div class="content">
                        <!-- recommend-news start -->
                        <ul class="recommend-news">
                            {% for n in hot %}
                                <li>
                                    <a href="{% url 'news:news_detail' n.id %}" target="_blank">
                                        <div class="recommend-thumbnail">
                                            <img src="{{ n.news.image_url }}" alt="title">
                                        </div>
                                        <p class="info">{{ n.news.title }}</p>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                        <!-- recommend-news end -->

                        <!--  news-nav start-->
                        <nav class="news-nav">
                            <ul class="clearfix">
                                <li class="active"><a href="javascript:void(0)" data-id='0'>最新资讯</a></li>
                                {% for news_tag in  tags %}
                                    <li><a href="javascript:void(0)" data-id="{{ news_tag.id }}">{{ news_tag.name }}</a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </nav>
                        <!--  news-nav end -->

                        <!-- news-contain start -->
                        <div class="news-contain">
                            <ul class="news-list">

                            </ul>
                        </div>
                        <!-- news-contain end -->

                        <!-- btn-more start -->
                        <a href="javascript:void(0);" class="btn-more">加载更多</a>
                        <!-- btn-more end -->
                    </div>
                    <!-- content end -->
                </div>
            {% endblock %}
            <!-- main-contain  end -->
            {#   左边#}
            <!-- side start -->
            {% block side %}
                <aside class="side">
                    <div class="side-activities">
                        <h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
                        <div class="activities-img">
                            <a href="javascript:void(0);" target="_blank">
                                <img src="../../static/images/english.jpg" alt="title">
                            </a>
                            <p class="activities-tips">对话国外小姐姐</p>
                        </div>
                        <ul class="activities-list">
                            <li>
                                <a href="javascript:void(0);" target="_blank">
                                    <span class="active-status active-start">报名中</span>
                                    <span class="active-title"><a
                                            href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" target="_blank">
                                    <span class="active-status active-end">已结束</span>
                                    <span class="active-title"><a
                                            href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="side-attention clearfix">
                        <h3 class="attention-title">关注我</h3>
                        <ul class="side-attention-address">
                            <li>
                                <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Taka</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
                                                                                 style="color:rgb(0, 108, 226);"></i>Taka</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
                                                                                 style="color:rgb(245,92,110);"></i>Taka</a>
                            </li>
                        </ul>
                        <div class="side-attention-qr">
                            <p>扫码关注</p>
                        </div>
                    </div>

                    <div class="side-hot-recommend">
                        <h3 class="hot-recommend">热门推荐</h3>
                        <ul class="hot-news-list">

                            {% for i in click_hot %}
                                <li>
                                    <a href="{% url 'news:news_detail' i.id %}" class="hot-news-contain clearfix" target="_blank">
                                        <div class="hot-news-thumbnail">
                                            <img src="{{ i.image_url }}"
                                                 alt="">
                                        </div>
                                        <div class="hot-news-content">
                                            <p class="hot-news-title">{{ i.title }}</p>
                                            <div class="hot-news-other clearfix">
                                                <span class="news-type">{{ i.tag.name }}</span>
                                                <!-- 自带的 -->
                                                <time class="news-pub-time">{{ i.update_time| timeuntil }}</time>
                                                <span class="news-author">{{ i.author.username }}</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            {% endfor %}

                        </ul>
                    </div>


                </aside>
            {% endblock %}
            <!-- side end -->
        </div>
    </main>
{% endblock %}

{% block script %}
    <script src="../../static/js/index.js"></script>
{% endblock %}